import React, { Component } from 'react';
import './style.css'
import { Redirect } from 'react-router-dom';
import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts' 
import { Spin } from 'antd';
import request from '../../request';

interface CourseItem {
  title: string;
  desc: string;
}
interface SearchItem {
  title: string;
  total: string;
  url: string;
}
interface DataStructure {
  [key: string]: {
    wordHot: CourseItem[];
    searchHot: SearchItem[]
  };
}

interface State {
  loading: boolean;
  isLogin: boolean;
  data: DataStructure;
}

class KeyWord extends Component{
  state:State = {
    loading: true,
    isLogin: true,
    data: {}
  }
  componentDidMount() {
    request.get('/api/isLogin').then(res => {
      const data: boolean = res.data;
      if (!data) {
        this.setState({
          isLogin: false,
          loading: false
        });
      } else {
        this.setState({
          loading: false
        });
      }
    });

    request.get('/api/showWenCaiData').then(res => {
      const data = res.data;
      if (data) {
        this.setState({ data });
      }
      this.setState({
        loading: false
      });
    });
  }

  // 热点
  getOption: () => echarts.EChartOption = () => {
    const { data } = this.state;
    interface Item {
      name: string;
      value: string;
    }

    const plantCap:Item[] = []
    for(let key in data) {
      data[key]['wordHot'].forEach(item => {
        const obj:Item = {
          name: '',
          value: ''
        }
        obj.name = item.title
        obj.value = item.desc
        plantCap.push(obj)
      })

    }
    const datalist = [{
      offset: [56, 48],
      symbolSize: 110,
      color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
          offset: 0,
          color: 'rgba(67, 186, 255, 0)',
      }, {
          offset: 1,
          color: 'rgb(67, 186, 255)'
      }])
  
  }, {
      offset: [30, 70],
      symbolSize: 70,
      color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
          offset: 0,
          color: 'rgba(67, 186, 255, 0)',
      }, {
          offset: 1,
          color: 'rgb(67, 186, 255)'
      }])
  }, {
      offset: [5, 43],
      symbolSize: 60,
      color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
          offset: 0,
          color: 'rgba(27, 96, 255, 0)',
      }, {
          offset: 1,
          color: 'rgb(27, 96, 255)'
      }])
  
  }, {
      offset: [93, 30],
      symbolSize: 70,
      color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
          offset: 0,
          color: 'rgba(48, 191, 191, 0)',
      }, {
          offset: 1,
          color: 'rgb(48, 191, 191)'
      }])
  }, {
      offset: [26, 25],
      symbolSize: 65,
      color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
          offset: 0,
          color: 'rgba(0, 166, 166, 0)',
      }, {
          offset: 1,
          color: 'rgb(0, 166, 166)'
      }])
  }, {
      offset: [75, 75],
      symbolSize: 60,
      color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
          offset: 0,
          color: 'rgba(84, 136, 255, 0)',
      }, {
          offset: 1,
          color: 'rgb(84, 136, 255)'
      }])
  
    }];
    var datas: any = [];
    for (var i = 0; i < plantCap.length; i++) {
      var item = plantCap[i];
      var itemToStyle = datalist[i];
      datas.push({
          name: item.name + '\n' + item.value,
          value: itemToStyle.offset,
          symbolSize: itemToStyle.symbolSize,
          label: {
            normal: {
              textStyle: {
                fontSize: 14,
                fontWeight: 800,
                lineHeight: 22,
              }
            }
          },
          itemStyle: {
            normal: {
              color: itemToStyle.color,
              opacity: itemToStyle.opacity
            }
          },
      })
    }
    return {
      backgroundColor: '#12468500',
      grid: {
        show: false,
        top: 10,
        bottom: 10
      },
      xAxis: [{
        gridIndex: 0,
        type: 'value',
        show: false,
        min: 0,
        max: 100,
        nameLocation: 'middle',
        nameGap: 5
      }],
      yAxis: [{
        gridIndex: 0,
        min: 0,
        show: false,
        max: 100,
        nameLocation: 'middle',
        nameGap: 30
      }],
      series: [{
        type: 'effectScatter',//scatter
        symbolSize: 120,
        symbol: 'circle',
        hoverAnimation: true,
        label: {
          normal: {
            show: true,
            formatter: '{b}',
            color: '#fff',
            lineHeight: 15,
            textStyle: {
              fontSize: '20'
            }
          },
        },
        itemStyle: {
            normal: {
              color: '#00acea',
              borderWidth: '1',
              borderType: 'solid',
              borderColor: '#00ffff',
              shadowColor: 'rgba(0, 0, 0, .6)',
              shadowBlur: 10,              
            }
        },
        data: datas
      }]
    };
  }

  render() {
    const { isLogin, loading } = this.state
    if(isLogin) {
      return (
        <Spin spinning={loading}>
          <div className="wraper">
            <div className="wrapper-search">
              {/* <ReactEcharts option={this.getSearchOption()} /> */}
            </div>
            <div className="wrapper-hot">
              <ReactEcharts option={this.getOption()} />
            </div>
          </div>
        </Spin>
      )
    }else {
      return <Redirect to="login" />;
    }
  }
}

export default KeyWord
